<template>
  <div class="login_container">
    <div class="login_box">
      <!--   logo   -->
      <div class="avatar_box">
        <img src="../assets/head.png" alt="">
      </div>
      <!--   登录表单   -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="90px">
        <el-form-item prop="userName" style="margin-top: 20%; width: 80%">
          <el-input v-model="loginForm.userName" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password" style="margin-top: 20px;margin-bottom: 30px; width: 80%">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-key" type="password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="button_left">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="warning" @click="openSingInBox">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
    <!-- 注册弹窗 -->
      <el-dialog title="用户注册"  :visible.sync="dialogFormVisible" width="40%">
        <el-form ref="signInFormRef" :model="signInForm"  label-width="110px" :rules="signInFormRules">
          <el-form-item prop="userName" label="用户名" style="width: 80%">
            <el-input v-model="signInForm.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="用户密码" style="width: 80%">
            <el-input v-model="signInForm.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="checkPassWord" label="确认密码" style="width: 80%">
            <el-input v-model="signInForm.checkPassWord" placeholder="请再一次输入密码" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="subSignInForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        userName: '',
        password: ''
      },
      reqLoginFrom: {
        userName: '',
        password: ''
      },
      signInForm: {
        userName: '',
        password: '',
        checkPassWord: ''
      },
      reqSignInForm: {
        userNo: '',
        userPs: ''
      },
      dialogFormVisible: false,
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        userName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            message: '请输入用户密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      // 验证注册表单
      signInFormRules: {
        // 验证用户名是否合法
        userName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            message: '请输入用户密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        // 验证确认密码是否合法
        checkPassWord: [
          {
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const passwordMd5 = this.$md5(this.loginForm.password)
        this.reqLoginFrom.userName = this.loginForm.userName
        this.reqLoginFrom.password = passwordMd5
        // 登录请求
        const { data: res } = await this.$http.post('/APIServer/api/login', this.reqLoginFrom)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.accessToken)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    },
    // 打开注册弹窗
    openSingInBox () {
      this.dialogFormVisible = true
    },
    // 提交注册表单
    subSignInForm () {
      this.$refs.signInFormRef.validate(async valid => {
        if (!valid) return
        const md5pwd = this.$md5(this.signInForm.password)
        const md5cpwd = this.$md5(this.signInForm.checkPassWord)
        if (md5pwd !== md5cpwd) {
          this.$message.error('两次输入密码不同，请检查！')
        } else {
          this.reqSignInForm.userNo = this.signInForm.userName
          this.reqSignInForm.userPs = md5pwd
          // 注册请求
          const { data: res } = await this.$http.post('/APIServer/api/createUser', this.reqSignInForm)
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success('注册成功')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.button_left {
  display: flex;
  justify-content: flex-end;
  margin-right: 10%;
}
</style>
